const { merge } = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.config");
const util = require("./util");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //引入清除文件插件
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin"); //引入用day替换moment

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = merge(baseWebpackConfig, {
  //指定构建环境
  mode: "production",
  //输出
  output: {
    path: util.resolve("../dist"),
    filename: "js/[name].[hash:8].js",
    publicPath: "/", //打包后的资源访问路径前缀
    chunkFilename: util.assetsPath("js/[name].[chunkhash:8].js")
  },
  //插件
  plugins: [
    //优化打包的大小,使用dayjs替换momentjs
    new AntdDayjsWebpackPlugin(),
    //清除打包的文件
    new CleanWebpackPlugin(),
    //分离css
    new MiniCssExtractPlugin({
      filename: "static/css/[name].[hash:7].css",
      chunkFilename: util.assetsPath("static/css/[id].[chunkhash:7].css")
    }),
    new HtmlWebpackPlugin({
      filename: util.resolve("../dist/index.html"), // html模板的生成路径
      template: "./public/index.html", //html模板
      inject: true, // true：默认值，script标签位于html文件的 body 底部
      hash: true, // 在打包的资源插入html会加上hash
      //  html 文件进行压缩
      minify: {
        removeComments: true, //去注释
        collapseWhitespace: true, //压缩空格
        removeAttributeQuotes: true //去除属性引用
      }
    })
  ],
  //开发环境本地启动的服务配置
  devServer: {},
  optimization: {
    minimize: true,
    //压缩css
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          discardComments: { remove: true } //移除注释
        }
      }),
      new TerserPlugin({
        parallel: true, //开启多线程来提高构建速度
        sourceMap: false,
        terserOptions: {
          warnings: false, //不展示warning
          compress: {
            unused: true, //去除未使用的
            drop_debugger: true, //移除debugger
            drop_console: true //去除console
          },
          output: {
            comments: false //去除注释
          }
        }
      })
    ],
    splitChunks: {
      chunks: "all",
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: "~",
      name: true,
      cacheGroups: {
        //将antd拆分
        antdui: {
          priority: 2,
          test: /[\\/]node_modules[\\/](antd)[\\/]/ //(module) => (/antd/.test(module.context)),
        },
        // 拆分基础插件
        basic: {
          priority: 3,
          test: /[\\/]node_modules[\\/](moment|react|react-dom|react-router|react-router-dom|react-redux)[\\/]/
        },
        //其他的组件
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        // 默认的配置
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },
  module: { rules: util.cssLoaders({ extract: true, sourceMap: false }) }
});
